<template>
  <view class="list-bg">
    <view class="pop-content">
      <basePage :show-tabbar="false" :page-params="pageParams">
        <scroll-view class="scroll-content" :scroll-y="true" style="height: 888rpx;margin-top: 20rpx;">
          <view
            v-for="(item, index) in curInvoiceList"
            :key="index"
            class="scroll-item"
            @click.stop="selectInvoiceFn(item)"
          >
            <view class="left-item">
              <view class="company-name">{{ item.invoiceTitle }}</view>
              <view class="taxpayer-code">{{ item.taxId || '' }}</view>
            </view>
            <view
              class="right-item"
              @click.stop="editInvoiceTitleFn(item)"
            >
              <text class="right-icon font_family icon-a-arrowright_tongyong_2" />
            </view>
          </view>
        </scroll-view>
      </basePage>
      <view class="btn-box">
        <button class="btn confirm-btn" :plain="true" @click="$u.throttle(addInvoiceTitleFn, 500)">添加发票抬头</button>
      </view>
    </view>
  </view>
</template>

<script>
import basePage from '@/components/base-page'
import { setPageParamsFn } from '@/common/common'
export default {
  components: {
    basePage,
  },
  props: {
    invoiceList: {
      type: Array,
      default() {
        return []
      }
    },
  },
  data() {
    return {
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
    }
  },
  computed: {
    curInvoiceList() {
      return this.invoiceList
    }
  },
  mounted() {
    if (this.curInvoiceList.length == 0) {
      setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
    }
  },
  methods: {
    /*选中方法*/
    selectInvoiceFn(val) {
      this.$emit('confirmInvoiceFn', val)
    },
    /*添加发票抬头*/
    addInvoiceTitleFn() {
      uni.navigateTo({
        url: `/invoiceManage/updateInvoice?type=add`
      })
    },
    /*编辑发票抬头*/
    editInvoiceTitleFn(data) {
      uni.navigateTo({
        url: `/invoiceManage/updateInvoice?type=edit&invoiceDetail=${JSON.stringify(data)}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  width: 100%;
  height: 1122rpx;
  .icon-left{
    width: 24rpx;
    height: 48rpx;
    float: left;
    margin: 21rpx 24rpx 0 0;
  }
  .item-content{
    height: 74rpx;
    padding-bottom: 32rpx;
    border-bottom: 2rpx solid $uni-grey-e2;
    width: 100%;
    white-space: nowrap;
  }
  .scroll-content{
    height: 900rpx;
    margin-top: 24rpx;
    .scroll-item{
      width: 100%;
      margin-bottom: 16rpx;
      background: $uni-grey-f9;
      border-radius: $uni-border-radius-default;
      overflow: hidden;
      //padding-bottom: 24rpx;
      .company-name{
        height: 40rpx;
        margin: 24rpx 0 0 24rpx;
        font-size: $uni-font-size-base;
      }
      .taxpayer-code{
        width: calc(100% - 160rpx);
        margin: 10rpx 0 0 24rpx;
        color: $uni-grey-666;
        font-size: $uni-font-size-sm;
        float: left;
      }
      .left-item{
        width: 526rpx;
        float: left;
      }
      .right-item{
        width: calc(100% - 526rpx);;
        height: 130rpx;
        float: right;
        .right-icon {
          float: right;
          margin: 48rpx 16rpx;
          font-size: $uni-font-size-lg;
          color: $uni-text-color-tips;
        }
      }

    }
    .scroll-item-active{
      border: 2rpx solid $uni-orange;
      width: calc(100% - 14rpx);
      .distance{
        background: $uni-orange!important;
      }
    }
  }
  .btn-box{
    bottom: 112rpx;
  }
}
</style>
